<!--
 * @Author: coocase
 * @Date: 2021-05-02 18:35:13
 * @LastEditTime: 2021-06-21 17:59:36
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\pages\detail\detailIntro.vue
-->
<template>
    <div class="detail-intro">
        <Row>
            <Col span="18">
                <div class="detail-gallery">
                    <Row>
                        <Col span="8">
                            <img
                                class="item-img"
                                :style="{ 'background-color': datas.imgUrl }"
                            />
                        </Col>
                        <Col span="16">
                            <div class="item-title">{{ datas.itemName }}</div>
                            <div class="item-basicDesc">
                                简介："{{ datas.basicDescription }}"
                            </div>
                            <div class="item-state">
                                <Steps :current="datas.state-1">
                                    <Step
                                        title="项目待定"
                                        
                                    ></Step>
                                    <Step
                                        title="预售/预订"
                                        
                                    ></Step>
                                    <Step
                                        title="售票中"
                                        
                                    ></Step>
                                    <Step
                                        title="已结束"
                                        
                                    ></Step>
                                </Steps>
                            </div>
                            <div class="item-adress">演出地点：{{datas.adress}} XXXX剧院</div>
                            <div class="item-date">
                                演出时间 :
                                <!-- v-model绑定默认选择 -->
                                <RadioGroup
                                    type="button"
                                    v-for="time in datas.startTime"
                                    :key="time.time"
                                    @on-change="radioChange"
                                    class="radio"
                                    v-model="timeSelect"
                                >
                                    <!-- 通过绑定label为id来识别radio的唯一性 -->
                                    <Radio :label="time.id" class="radio-item">{{
                                        time.time
                                    }}</Radio>
                                </RadioGroup>
                            </div>
                            <div class="item-price">
                                选择票价： 
                                <RadioGroup
                                    type="button"
                                    v-for="price in datas.itemPrice"
                                    :key="price.price"
                                    @on-change="radioChange"
                                    class="radio"
                                    v-model="priceSelect"
                                >
                                    <!-- 通过绑定label为id来识别radio的唯一性 -->
                                    <Radio :label="price.id" class="radio-item">￥{{
                                        price.price
                                    }} </Radio>
                                </RadioGroup>
                            </div>
                            <Button class="item-buy" type="primary"  @click="getBuyInfo">购买</Button>
                        </Col>
                    </Row>
                </div>
            </Col>
            <Col span="1"></Col>
            <Col span="5">
                <div class="note">
                    <p class="note-title">
                        <Icon
                            type="ios-checkmark-circle-outline"
                            color="red"
                        />不支持退
                    </p>
                    <p class="note-info">
                        票品为有价证券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。
                    </p>
                    <p class="note-title">
                        <Icon
                            type="ios-checkmark-circle-outline"
                            color="red"
                        />可选座
                    </p>
                    <p class="note-info">
                        本项目支持自主选座<br />
                        1. 选择演出时间，并点击“选座购票”进入选座页面<br />
                        2. 选座后，在倒计时内支付成功，选座生效
                        （先付后选的项目需要先付款，到开放选座的日期我们会短信通知，请注意查收）
                    </p>
                    <p class="note-title">
                        <Icon type="ios-checkmark-circle-outline" color="red" />
                        电子票
                    </p>
                    <p class="note-info">
                        电子票：通过票夹中的二维码或身份证，可以直接验票入场（具体以下单后票夹信息为准）
                    </p>
                    <p class="note-title">
                        <Icon
                            type="ios-checkmark-circle-outline"
                            color="red"
                        />纸质发票
                    </p>
                    <p class="note-info">
                        该项目支持开具纸质发票，请您在演出开始前通过订单页补开，发票将在演出结束后1个月左右，统一由主办方提供
                    </p>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: "detailIntro",
    props: ["datas"],
    data: function () {
        return {
            score: this.datas.avgScore / 2,
            timeSelect: 1,
            priceSelect:1,
            isDisabled:true,
        };
    },
    mounted: function () {
        // console.log(this.datas);
        // console.log("intro");
        this.judgeDisabled()
    },
    methods: {
        radioChange: function (e) {
        },
        judgeDisabled:function () {  
            // console.log(this.datas.state);
            if(this.datas.state==2&&this.datas.state==3){
               return true
            }else{
                return true
            }
           
        },
        getBuyInfo:function () {  
            if(this.GLOBAL.hasLogin){
                this.$emit('getBuyInfo',1)
                
                this.$router.push({ name: 'Pay' })
            }else{
                 this.$Notice.error({
                    title: '请登录',
                    duration:3
                });
            }
            
        }
         
    },
};
</script>

<style scoped>
.item-img {
    height: 360px;
    width: 270px;
    /* background-color: rgb(130, 145, 116); */
}
.item-title {
    font-size: 22px;
    color: #000;
}
.item-basicDesc {
    position: relative;
    font-size: 16px;
    color: #4a4a4a;
    margin: 21px 0px;
    zoom: 1;
}
.item-state {
    margin: 40px 0px;
}
.radio-item{
margin-left: 10px;
}
.item-date,.item-adress,.item-price{
    position: relative;
    font-size: 16px;
    color: #4a4a4a;
    margin-top: 21px;
    zoom: 1;
}

.item-buy {
    margin-top: 40px;
    margin-left: 50px;
    width: 210px;
    height: 40px;
    line-height: 40px;
    /* background-color: #ff3c1b ; */
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
}

.note-title {
    font-size: 14px;
}
.note-info {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}
</style>